<template>
  <div class="todo-footer" v-show="total">
    <label>
      <!-- <input type="checkbox" :checked="isAll" @change="checkAll" /> -->
	  <input type="checkbox" v-model="isAll" />
    </label>
    <span>
      <span>已完成{{doneTotal}}</span> / 全部{{total}}
    </span>
    <button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
  </div>
</template>

<script>
export default {
	name:'MyFooter',
	props:['todos'],
	computed:{
		total(){
			return this.todos.length;
		},
		doneTotal(){
			// let i = 0
			// this.todos.forEach((t) => {
			// 	if(t.done) i++;
			// })
			// return i
			// const x = this.todos.reduce((pre,curr)=>{
			// 	return pre + (curr.done ? 1 : 0)
			// },0)
			// return x
			return this.todos.reduce((pre,todo) => pre + (todo.done ? 1 : 0),0)
		},
		isAll:{
			get(){
				return this.doneTotal === this.total && this.total > 0
			},
			set(value){
				//this.checkAllTodos(value)
				// 使用自定义事件方式调用,不需要写在props中
				this.$bus.$emit('checkAllTodos',value)
			}
		}
	},
	methods:{
		clearAll(){
			// 使用自定义事件方式调用,不需要写在props中
			if(confirm('确认清除所有已完成任务?')) this.$bus.$emit('clearAllTodo')
			//this.clearAllTodo()
		}
		// checkAll(e){
		// 	console.log('checkAll',e.target.checked);
		// 	this.checkAllTodos(e.target.checked)
		// }
	},
	mounted() {
		this.$bus.$on('clearAllTodo',this.clearAll)
	},
	beforeDestroy() {
		this.$bus.$off('clearAllTodo')
	}
}
</script>

<style scoped>
	/*footer*/
	.todo-footer {
	  height: 40px;
	  line-height: 40px;
	  padding-left: 6px;
	  margin-top: 5px;
	}

	.todo-footer label {
	  display: inline-block;
	  margin-right: 20px;
	  cursor: pointer;
	}

	.todo-footer label input {
	  position: relative;
	  top: -1px;
	  vertical-align: middle;
	  margin-right: 5px;
	}

	.todo-footer button {
	  float: right;
	  margin-top: 5px;
	}
</style>
